<template>
  <div class="container">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="活动名称">
        <el-input
          id="id"
          v-model="id"
          name="id"
          type="text"
          placeholder="id"
          required
          autofocus
        ></el-input
      ></el-form-item>
      <el-form-item label="活动名称"
        ><el-input
          id="name"
          v-model="username"
          name="name"
          type="text"
          placeholder="Name"
          required
          autofocus
        ></el-input
      ></el-form-item>
      <el-form-item label="活动名称"
        ><el-input
          id="pass"
          v-model="password"
          name="pass"
          type="text"
          placeholder="pass"
          required
          autofocus
        ></el-input
      ></el-form-item>
      <el-form-item label="活动名称"
        ><el-input
          name="hobby"
          v-model="hobby"
          type="text"
          placeholder="hobby"
          required
          autofocus
        ></el-input
      ></el-form-item>
      <el-form-item label="活动名称">
        <el-input
          name="sex"
          v-model="sex"
          type="text"
          placeholder="sex"
          required
          autofocus
        ></el-input
      ></el-form-item>
      <el-button id="sub" @click="sub">提交</el-button>
    </el-form>
  </div>
</template>

<script>
const axios = require(`axios`);
const config = require(`../config/config`);
export default {
  name: `Form`,
  data() {
    return {
      id: null,
      sex: null,
      hobby: null,
      username: null,
      password: null
    };
  },
  methods: {
    getUser() {
      axios
        .get(`${config.localurl}/getuser`, { dataType: `json` })
        .then(response => {
          console.log(response);
        })
        .catch(err => {
          console.log(err);
        });
      console.log(this.username);
    },
    sub() {
      axios({
        url: `${config.localurl}/adduser`,
        method: `post`,
        data: {
          id: this.id,
          username: this.username,
          password: this.password,
          sex: this.sex,
          hobby: this.hobby
        },
        dataType: `json`
      })
        .then(res => {
          console.log(res);
        })
        .catch(() => {
          console.log(`hello`);
        });
    }
  }
};
</script>

<style scoped>
.container {
  margin: 0 5%;
}
</style>
